<template>
  <div>
    <el-dialog
      :visible.sync="dialog.add"
      :close-on-click-modal="false"
      title="添加"
      width="80%"
      append-to-body
      @closed="dialogClosed('addForm')"
    >
      <el-form ref="addForm" :model="form" label-width="120px" :rules="validateRules">
        <el-row>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="店铺标题" prop="shopTitle">
              <el-input v-model="form.shopTitle" placeholder="请输入店铺标题" disabled clearable />
              <!-- <el-button
                type="text"
                size="small"
                @click="showJoinSearch({
                searchDialog: 'GoodsShopMain'
              })"
              >选择店铺标题</el-button>-->
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="商品标题" prop="goodsTitle">
              <el-input v-model="form.goodsTitle" placeholder="请输入商品标题" disabled clearable />
              <el-button
                v-if="chooseGoodsInfo"
                type="text"
                size="small"
                @click="showJoinSearch({
                searchDialog: 'GoodsInfoMain'
              })"
              >选择商品标题</el-button>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="SKU图片" prop="picUrl">
              <el-image
                style="width: 80px; height: 80px"
                fit="contain"
                :src="form.picUrl ? form.picUrl.indexOf('http') >= 0 ? form.picUrl : resUrl + form.picUrl : ''"
                :preview-src-list="[form.picUrl ? form.picUrl.indexOf('http') >= 0 ? form.picUrl : resUrl + form.picUrl : '']"
              ></el-image>
              <el-button
                type="text"
                size="small"
                style="margin-left: 10px;"
                @click="showImageChoose(form.picUrl)"
              >选择图片</el-button>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="售卖标题" prop="title">
              <el-input v-model="form.title" placeholder="请输入售卖标题" clearable />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="原价" prop="price">
              <el-input-number
                v-model="form.price"
                placeholder="请输入原价"
                clearable
                style="width: 100%;"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="销售价" prop="salePrice">
              <el-input-number
                v-model="form.salePrice"
                placeholder="请输入销售价"
                clearable
                style="width: 100%;"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="库存" prop="stockCount">
              <el-input-number
                v-model="form.stockCount"
                placeholder="请输入库存"
                clearable
                style="width: 100%;"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="上架状态" prop="shelfStatus">
              <el-select
                v-model="form.shelfStatus"
                placeholder="请选择上架状态"
                clearable
                style="width: 100%;"
              >
                <el-option
                  v-for="item in selects.shelfStatusSelect"
                  :value="item.value"
                  :key="item.value"
                  :label="item.displayValue"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <GoodsSkuDetailSetting ref="GoodsSkuDetailSettingAdd" />
      <div slot="footer">
        <el-button @click="dialog.add = false">取消</el-button>
        <el-button type="primary" @click="add" :loading="loading.add">添加</el-button>
      </div>
    </el-dialog>
    <el-dialog
      :visible.sync="dialog.edit"
      :close-on-click-modal="false"
      title="修改"
      width="80%"
      append-to-body
      @closed="dialogClosed('editForm')"
    >
      <el-form ref="editForm" :model="form" label-width="120px" :rules="validateRules">
        <el-row>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="店铺标题" prop="shopTitle">
              <el-input v-model="form.shopTitle" placeholder="请输入店铺标题" disabled clearable />
              <!-- <el-button
                type="text"
                size="small"
                @click="showJoinSearch({
                searchDialog: 'GoodsShopMain'
              })"
              >选择店铺标题</el-button>-->
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="商品标题" prop="goodsTitle">
              <el-input v-model="form.goodsTitle" placeholder="请输入商品标题" disabled clearable />
              <!-- <el-button
                type="text"
                size="small"
                @click="showJoinSearch({
                searchDialog: 'GoodsInfoMain'
              })"
              >选择商品标题</el-button>-->
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="SKU图片" prop="picUrl">
              <el-image
                style="width: 80px; height: 80px"
                fit="contain"
                :src="form.picUrl ? form.picUrl.indexOf('http') >= 0 ? form.picUrl : resUrl + form.picUrl : ''"
                :preview-src-list="[form.picUrl ? form.picUrl.indexOf('http') >= 0 ? form.picUrl : resUrl + form.picUrl : '']"
              ></el-image>
              <el-button
                type="text"
                size="small"
                style="margin-left: 10px;"
                @click="showImageChoose"
              >选择图片</el-button>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="售卖标题" prop="title">
              <el-input v-model="form.title" placeholder="请输入售卖标题" clearable />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="原价" prop="price">
              <el-input-number
                v-model="form.price"
                placeholder="请输入原价"
                clearable
                style="width: 100%;"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="销售价" prop="salePrice">
              <el-input-number
                v-model="form.salePrice"
                placeholder="请输入销售价"
                clearable
                style="width: 100%;"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="库存" prop="stockCount">
              <el-input-number
                v-model="form.stockCount"
                placeholder="请输入库存"
                clearable
                style="width: 100%;"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
            <el-form-item label="上架状态" prop="shelfStatus">
              <el-select
                v-model="form.shelfStatus"
                placeholder="请选择上架状态"
                clearable
                style="width: 100%;"
              >
                <el-option
                  v-for="item in selects.shelfStatusSelect"
                  :value="item.value"
                  :key="item.value"
                  :label="item.displayValue"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <GoodsSkuDetailSetting ref="GoodsSkuDetailSettingEdit" />
      <div slot="footer">
        <el-button @click="dialog.edit = false">取消</el-button>
        <el-button type="primary" @click="edit" :loading="loading.edit">修改</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as utils from '@/utils/utils'
import * as ResponseStatus from '@/utils/response-status'
import UploadImage from '@/components/Upload/UploadImage'
import Tinymce from '@/components/Tinymce'
const resUrl = process.env.VUE_APP_RES_URL
import GoodsSkuDetailSetting from './GoodsSkuDetailSetting.vue'
export default {
  name: 'GoodsSkuAddEdit',
  components: {
    UploadImage,
    Tinymce,
    GoodsSkuDetailSetting,
  },
  data() {
    return {
      dialog: {
        add: false,
        edit: false,
      },
      loading: {
        add: false,
        edit: false,
      },
      form: {
        shopId: undefined,
        shopTitle: undefined,
        shopIsActive: undefined,
        goodsId: undefined,
        goodsTitle: undefined,
        goodsIsActive: undefined,
        picId: undefined,
        picUrl: undefined,
        title: undefined,
        price: undefined,
        salePrice: undefined,
        stockCount: undefined,
        shelfStatus: undefined,

        categoryId: undefined, // 用于获取选择商品返回的categoryId
      },
      validateRules: {
        shopId: [
          {
            type: 'integer',
            required: true,
            message: '此项为必须项',
            trigger: 'blur',
          },
        ],
        shopTitle: [
          {
            type: 'string',
            required: true,
            message: '此项为必须项',
            trigger: 'blur',
          },
          {
            type: 'string',
            min: 1,
            max: 50,
            message: '必须1-50个字符',
            trigger: 'blur',
          },
        ],
        shopIsActive: [
          {
            type: 'integer',
            required: true,
            message: '此项为必须项',
            trigger: 'blur',
          },
        ],
        goodsId: [
          {
            type: 'integer',
            required: true,
            message: '此项为必须项',
            trigger: 'blur',
          },
        ],
        goodsTitle: [
          {
            type: 'string',
            required: true,
            message: '此项为必须项',
            trigger: 'blur',
          },
          {
            type: 'string',
            min: 1,
            max: 100,
            message: '必须1-100个字符',
            trigger: 'blur',
          },
        ],
        goodsIsActive: [
          {
            type: 'integer',
            required: true,
            message: '此项为必须项',
            trigger: 'blur',
          },
        ],
        picUrl: [
          {
            type: 'string',
            required: true,
            message: '此项为必须项',
            trigger: 'blur',
          },
          {
            type: 'string',
            min: 1,
            max: 500,
            message: '必须1-500个字符',
            trigger: 'blur',
          },
        ],
        title: [
          {
            type: 'string',
            required: true,
            message: '此项为必须项',
            trigger: 'blur',
          },
          {
            type: 'string',
            min: 1,
            max: 100,
            message: '必须1-100个字符',
            trigger: 'blur',
          },
        ],
        salePrice: [
          {
            type: 'number',
            required: true,
            message: '此项为必须项',
            trigger: 'blur',
          },
        ],
        stockCount: [
          {
            type: 'integer',
            required: true,
            message: '此项为必须项',
            trigger: 'blur',
          },
        ],
      },
      dataDictCodes: ['YES_NO', 'SHELF_STATUS'],
      selects: {
        shopIsActiveSelect: [],
        goodsIsActiveSelect: [],
        shelfStatusSelect: [],
      },
      resUrl: resUrl,
      chooseGoodsInfo: true,
      excludeResetProps: [],
    }
  },
  computed: {},
  mounted() {
    this.initDataDict()
  },
  methods: {
    initDataDict() {
      utils
        .getDataDict(this.dataDictCodes)
        .then((response) => {
          if (response) {
            utils.getSelectDictItems({
              mainComponent: this,
              dataDictItems: response,
              dictCode: 'SHELF_STATUS',
              formProp: 'shelfStatus',
              dataProp: 'shelfStatusSelect',
            })
          }
        })
        .catch((error) => {})
    },
    dialogClosed(formRef) {
      if (this.excludeResetProps.length > 0) {
        // 有不需要被清空的数据
        let oldForm = JSON.parse(JSON.stringify(this.form))
        this.$refs[formRef].resetFields()
        for (let key in this.form) {
          this.form[key] = undefined
        }
        this.excludeResetProps.forEach((key) => {
          this.form[key] = oldForm[key]
        })
      } else {
        this.$refs[formRef].resetFields()
        for (let key in this.form) {
          this.form[key] = undefined
        }
      }
    },
    add() {
      const goodsSkuDetailSettingAdd = this.$refs.GoodsSkuDetailSettingAdd
      goodsSkuDetailSettingAdd.getAttributeValues()
      if (goodsSkuDetailSettingAdd.isValid) {
        this.form.goodsAttributeValueVOList =
          goodsSkuDetailSettingAdd.attrValues
        this.$emit('add')
      }
    },
    edit() {
      const goodsSkuDetailSettingEdit = this.$refs.GoodsSkuDetailSettingEdit
      goodsSkuDetailSettingEdit.getAttributeValues()
      if (goodsSkuDetailSettingEdit.isValid) {
        this.form.goodsAttributeValueVOList =
          goodsSkuDetailSettingEdit.attrValues
        this.$emit('edit')
      }
    },
    /** 触发父组件展示关联表数据的搜索对话框 */
    showJoinSearch(options) {
      this.$emit('showJoinSearchDialog', options)
    },
    showImageChoose() {
      if (!this.form.goodsId) {
        this.$message.warning('请先选择商品')
        return
      }
      this.$emit('showImageChoose', this.form)
    },
  },
}
</script>

<style>
</style>